<template>
    <div>
        <el-form label-width="80px">
            <el-form-item label="SPU名称">
                {{spu.spuName}}
            </el-form-item>

            <el-form-item label="SKU名称">
                <el-input v-model="skuInfo.skuName"  placeholder="SKU名称"></el-input>
            </el-form-item>

            <el-form-item label="价格(元)">
                <el-input v-model="skuInfo.price" type="number" placeholder="价格(元)"></el-input>
            </el-form-item>

            <el-form-item label="重量(千克)">
                <el-input v-model="skuInfo.weight" placeholder="重量(千克)"></el-input>
            </el-form-item>

            <el-form-item label="规格描述">
                <el-input v-model="skuInfo.skuDesc" type="textarea" placeholder="规格描述" rows="4"></el-input>
            </el-form-item>

            <el-form-item label="平台属性">
                <el-form inline label-width="80px">
                    <el-form-item :label="attrInfo.attrName"  v-for="attrInfo in attrInfoList" :key="attrInfo.id">
                        <el-select v-model="attrInfo.attrIdAndValueId" placeholder="请选择">
                            <el-option  :value="`${attrInfo.id}-${attrValue.id}`" :label="attrValue.valueName"
                                        v-for="attrValue in attrInfo.attrValueList" :key="attrValue.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>

            <el-form-item label="销售属性">
                <el-form inline label-width="80px">
                    <el-form-item :label="saleAttr.saleAttrName" v-for="saleAttr in supSaleAttrList" :key="saleAttr.id">
                        <el-select v-model="saleAttr.attrIdAndeValueId" placeholder="请选择">
                            <el-option :label="saleAttrName.saleAttrName" :value="`${saleAttr.id}-${saleAttrName.id}`"
                                       v-for="saleAttrName in saleAttr.spuSaleAttrValueList"
                                       :key="saleAttrName.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </el-form-item>

            <el-form-item label="图片列表">
                <el-table border :data="spuImageList" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" label="序号" align="center" width="80px"></el-table-column>

                    <el-table-column label="图片">
                        <template slot-scope="{row,$index}">
                            <img :src="row.imgUrl" alt="" width="100px" height="100px">
                        </template>
                    </el-table-column>

                    <el-table-column label="名称" prop="imgName"></el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="{row,$index}">
                            <el-button v-if="row.isDefault===0" @click="changeDefault(row)" type="primary" size="mini">设置默认</el-button>
                            <el-button v-else size="mini">默认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-form-item>

            <el-form-item>
                <el-button @click="save" type="primary">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                spuImageList: [],
                supSaleAttrList: [],
                attrInfoList: [],
                skuInfo: {
                    // 父组件给的数据
                    spuId: '',
                    tmId: '',
                    category3Id: '',
                    // 数据双向绑定v-model
                    skuName: '',
                    price: '',
                    skuDesc: '',
                    weight: '',
                    // 需要自己写代码
                    skuDefaultImg: '',
                    skuSaleAttrValueList: [],
                    skuAttrValueList: [],
                    skuImageList: [],
                },
                spu: {},
                imageList: [],
            }
        },
        methods: {
            cancel() {
                this.$emit('cancel');
                Object.assign(this._data,this.$options.data());
            },

            async getData(spu,category1Id,category2Id) {
                this.skuInfo.category3Id = spu.category3Id;
                this.skuInfo.tmId = spu.tmId;
                this.skuInfo.spuId = spu.id;
                this.spu = spu;

                // 获取图片列表
                const {code:spuImageCode,data:spuImageList} = await this.$API.sku.reqSpuImage(spu.id);
                if(spuImageCode === 200) {
                    let list = spuImageList;
                    list.forEach((item) => {
                        item.isDefault = 0;
                    });

                    this.spuImageList = list;
                }

                // 获取销售属性列表
                const {code:supSaleAttrCode,data:supSaleAttrList} = await this.$API.sku.reqSpuSaleAttr(spu.id);
                if(supSaleAttrCode === 200) {
                    this.supSaleAttrList = supSaleAttrList;
                }

                // 获取平台属性的列表
                const {code:attrInfoCode,data:attrInfoList} = await this.$API.sku.reqAttrInfoList(category1Id,category2Id,spu.category3Id);
                if(attrInfoCode === 200) {
                    this.attrInfoList = attrInfoList;
                }

            },

            // table表格复选框按钮的事件
            handleSelectionChange(params) {
                this.imageList = params;
            },

            changeDefault(row) {
                this.spuImageList.forEach(item => item.isDefault = 0);

                row.isDefault = 1;

                // 收集默认图片的地址
                this.skuInfo.skuDefaultImg = row.imgUrl;
            },

            async save() {
                // 整理平台属性
                const {attrInfoList,skuInfo,supSaleAttrList,imageList} = this;
                // 整理平台属性的数据方式1
                /*let arr = [];
                attrInfoList.forEach((item) => {
                    if(item.attrIdAndValueId) {
                        const [attrId,valueId] = item.attrIdAndValueId.split('-');
                        let obj = {
                            attrId,
                            valueId,
                        };

                        arr.push(obj);
                    }
                });

                skuInfo.skuAttrValueList = arr;*/

                skuInfo.skuAttrValueList = attrInfoList.reduce((prev,item) => {
                    if(item.attrIdAndValueId) {
                        const [attrId,valueId] = item.attrIdAndValueId.split('-');

                        prev.push({
                            attrId,
                            valueId
                        });
                    }
                    return prev;
                },[]);

                // 整理销售属性
                skuInfo.skuSaleAttrValueList = supSaleAttrList.reduce((prev,item) => {
                    if(item.attrIdAndeValueId) {
                        const [saleAttrId,saleAttrValueId] = item.attrIdAndeValueId.split('-');
                        prev.push({saleAttrId,saleAttrValueId});
                    }
                    return prev;
                },[]);

                // 整理图片数据
                skuInfo.skuImageList = imageList.map((item) => {
                    return {
                        imgName: item.imgName,
                        imgUrl: item.imgUrl,
                        isDefault: item.isDefault,
                        spuImgId: item.id,
                    }
                });

                // 发送请求
                const {code} = await this.$API.sku.reqAddSku(this.skuInfo);
                if(code === 200) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });

                    this.$emit('cancel');
                }
            }
        },

        name: "Sub"
    }
</script>

<style scoped>

</style>
